<template>
    <div class="box">
        <el-tabs tab-position="left" @tab-click="handleClick">
            <el-tab-pane label="商品">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in tableData" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 0)">
                        <div>{{ it.name }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="普通商品">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in productlist" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 1)">
                        <div>{{ it.title }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="秒杀商品">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in productlist" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 2)">
                        <div>{{ it.title }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="拼团商品">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in productlist" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 3)">
                        <div>{{ it.title }}</div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="砍价商品">
                <div class="listbox">
                    <div class="list" v-for="(it, i) in productlist" :key="i" :class="link == it.ID ? 'active' : ''"
                        @click="handClick(it, 4)">
                        <div>{{ it.title }}</div>
                    </div>
                </div>
            </el-tab-pane> -->
        </el-tabs>
    </div>
</template>
<script>
export default {
    name: "RoutLink",
    props: ['link'],
    watch: {


    },

    data() {
        return {
            tableData: [],
            productlist: []
        }
    },
    mounted() {
        // this.getDatas()
        this.getData()
    },
    methods: {
        handleClick(e) {
            if (e.index == 1) {
                this.getData()
            } else if (e.index == 2) {
                this.getkillData()
            } else if (e.index == 3) {
                this.getteamworkData()
            } else if (e.index == 4) {
                this.getbargainingData()
            }
        },
        handClick(e, index) {
            e.goodsType = index
            this.$emit('selpage', e)
        },
        //获取数据
        getData() {
            this.request('business/add_goods/', 'get', { page: 1, size: 50, partition: 0 }).then(res => {
                this.tableData = res.data.data
            })

        },
        //秒杀商品数据
        getkillData() {
            this.request('admin/killing/add_goods/', 'get', {
                page: 1, size: 50,
            }).then(res => {
                this.productlist = res.data.data
            })
        },
        //拼团商品数据
        getteamworkData() {
            this.request('admin/teamwork/add_goods/', 'get', {
                page: 1, size: 50,
            }).then(res => {
                this.productlist = res.data.data
            })
        },
        //砍价商品
        getbargainingData() {
            this.request('admin/bargaining/add_goods/', 'get', {
                page: 1, size: 50,
            }).then(res => {
                this.productlist = res.data.data
            })
        },
        //获取商品分区
        getDatas() {
            this.request('admin/partition/', 'get', { page: 1, size: 100 }).then(res => {
                res.data.data.forEach((it) => {
                    this.tableData.push({ ID: '/pages/goods/category?subzone=' + it.ID, name: it.name })
                })
                console.log(this.tableData, "res")

            })
        }
    }
};
</script>
<style scoped lang="scss">
.listbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .list {
        padding: 4px 5px;
        background-color: #fff;
        border: 1px solid #ccc;
        margin: 5px 5px;
        cursor: pointer;
    }

    .list:hover {
        background: #409eff;
        color: #fff;
        border-color: #409eff;
    }

    .active {
        background: #409eff;
        color: #fff;
        border-color: #409eff;
    }
}
</style>